<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:q="http://huliqing.name/qfaces"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/example/_template.xhtml" >
	<ui:define name="title">miniDataTable</ui:define>
	<ui:define name="header">miniDataTable组件示例</ui:define>
	<ui:define name="content">
			<style type="text/css">
				.header{background:#CCC;color:Blue;font-weight:bold;}
				.table{border:1px solid gray;text-align:center;}
				.rowA{background:#CCC;}
				.rowB{background:#FFF;}
				.colA{width:60px;}
				.colB{width:120px;}
				.myRowOn{background:blue;color:white;}
				.scrollerClass{border:1px solid gray;width:100%;color:gray;}
				.scrollerInfo{color:green;}
				.scrollerPageClass{border:1px solid GRAY;}
				.scrollerPageCurrentClass{border:1px solid GRAY;background:#F2F2F2;color:orange;font-weight:bold;}
				.scrollerPageOnClass{border:1px solid GRAY;background:#F2F2F2;color:orange;cursor:pointer;}
			</style>

			<div> 高级控件，支持ajax排序，ajax翻页，ajax编辑, ajax搜索 </div>
			<div style="width:500px;margin:20px 0;">
				<q:miniDataTable id="myMiniDataTable2"
					strHeaders="ID,姓名,年龄 ,电子邮件, 生日" 
					sortFields=",name,age,email,birthday"
					search="#{miniDataTableBean.loadData}"
					alwaysShow="true"
					showOpenButton="false"
					displayJump="true"
					displayInfo="true"
					editListener="#{miniDataTableBean.editListener}"
					editColumns="0,1,1,1,1"
					
					styleClass="table"
					headerClass="header"
					rowClasses="rowB,rowA"
					columnClasses="colA,colB"
					rowOnClass="myRowOn">
				</q:miniDataTable>
			</div>

			<div> 非常规用法，作为搜索及选择器使用,同样可支持：ajax排序，ajax翻页，ajax编辑 </div>
			<h:panelGrid columns="3" border="1" width="300" >
				<h:outputText value="姓名" />
				<h:inputText id="name" value="" />
				<q:miniDataTable id="myMiniDataTable1" 
					for=",name,age,email,birthday" 
					strHeaders="ID,姓名,年龄 ,电子邮件, 生日" 
					sortFields=",name,age,email,birthday"
					search="#{miniDataTableBean.loadData}"
					displayPage="9"
					autoClose="true"
					searchWhenOpen="true"
					
					
					styleClass="table"
					headerClass="header"
					rowClasses="rowB,rowA"
					columnClasses="colA,colB"
					scrollerClass="scrollerClass"
					rowOnClass="myRowOn"
					width="500">
				</q:miniDataTable>
				
				<h:outputText value="年龄" />
				<h:inputText id="age" value=""/>
				<h:panelGroup />
				
				<h:outputText value="电子邮件" />
				<h:inputText id="email" value=""/>
				<h:panelGroup />
				
				<h:outputText value="生日" />
				<h:inputText id="birthday" value=""/>
				<h:panelGroup />
			</h:panelGrid>

		
			
	</ui:define>
	<ui:define name="description" >
		功能强大的迷你版DataTable组件，<br />
		1.完全Ajax方式的table组件.<br />
		2.支持分页及排序功能.<br />
		3.可以引用前台页面组件的值.<br />
		4.可实现选中并赋值.<br />
		5.支持完整的自定义样式.
		6.支持直接编辑
	</ui:define>
	<ui:define name="htmlCode" >
		<h:outputText value="#{miniDataTableBean.htmlCode}" />
	</ui:define>
	<ui:define name="javaCode" >
		<h:outputText value="#{miniDataTableBean.javaCode}" />
	</ui:define>
</ui:composition>